<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Modal, Message } from '@arco-design/web-vue'
import api from '@/api'

const $route = useRoute()
const $router = useRouter()

const departmentsList = ref([])
const currentDepartmentIndex = ref(0)
const postsList = ref([])
const currentPostsIndex = ref(0)
const listData = ref([])
const getDepartmentsList = async () => {
  try {
    const res = await api.get('/recruit/departmentsList')
    console.log('getDepartmentsList', res)
    departmentsList.value = res.data
    // listTotal.value = res.total
    getPostsList()
  } catch (error) {
    console.error(error)
  }
}
const getPostsList = async () => {
  try {
    const res = await api.get('/recruit/postsList', {
      params: {
        department_id: departmentsList.value[currentDepartmentIndex.value].id
      }
    })
    console.log('getPostsList', res)
    postsList.value = res.data
    // listTotal.value = res.total
    getDataList()
  } catch (error) {
    console.error(error)
  }
}
const getDataList = async () => {
  try {
    const res = await api.get('/recruit/talentPoolList', {
      params: {
        departments_id: departmentsList.value[currentDepartmentIndex.value].id,
        posts_id: postsList.value[currentPostsIndex.value].id,
        page: 1,
        pageSize: 20
      }
    })
    console.log('getDataList', res)
    listData.value = res.data.items
    // listTotal.value = res.total

  } catch (error) {
    console.error(error)
  }
}
getDepartmentsList()

const selectDepartments = (index) => {
  currentDepartmentIndex.value = index
  currentPostsIndex.value = 0
  getPostsList()
}

const selectPosts = (index) => {
  currentPostsIndex.value = index
  getDataList()
}

const del = async (record) => { 
  const url = `/recruit/DelTalentPool?application_worker_id=${record.application_worker_id}`
  Modal.confirm({
    title: "提示",
    content: "您确定删除该人才吗？",
    bodyStyle: "text-align:center",
    onBeforeOk: async () => {
      const res = await api.get(url)
      if (res.code == 200) { 
        Message.success('删除成功')
        getDataList()
      } else {
        Message.error(res.message)
      }
    },
  });
}


const toJump = (url) => {
  console.log('router',$router.push(url))
  $router.push(url)
}
</script>

<template>
  <div class="page">
    <div class="header">
      <a-button @click="toJump('/recruit/talentPool/contrast')" type="primary">人才对比</a-button>
    </div>

    <div class="talent_body">
      <div class="switch_category">
        <div class="switch_category_div">
          <div class="name">部门</div>
          <div class="category_list">
            <div @click="selectDepartments(index)" class="category_cell"
                 :class="{active: currentDepartmentIndex==index}"
                 v-for="(item,index) in departmentsList"
                 :key="index">{{item.name}}</div>
          </div>
        </div>
        <div class="switch_category_div">
          <div class="name">岗位</div>
          <div>
            <div @click="selectPosts(index)" class="category_cell"
                 :class="{active: currentPostsIndex==index}"
                 v-for="(item,index) in postsList"
                 :key="index">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="talent_table">
        <a-table :data="listData">
          <template #columns>
            <a-table-column title="序号"
                            :width="60">
              <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
            </a-table-column>
            <a-table-column title="姓名"
                            data-index="worker_name"></a-table-column>
            <a-table-column title="手机号"
                            data-index="worker_mobile"></a-table-column>
            <a-table-column title="操作"
                            align="center"
                            :width="88">
              <template #cell="{ record }">
                <a-space>
                  <a-button type="primary"
                            size="mini"
                            @click="toJump('/recruit/talentPool/records?id=' + record.application_worker_id + '&plan_id=' + record.recuit_plan_id)">面试记录</a-button>
                  <a-button type="primary"
                            status="danger"
                            size="mini"
                            @click="del(record)">
                    删除
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: flex-end;
}

.talent_body {
  width: 100%;
  height: calc(100% - 52px);
  display: flex;
}

.switch_category {
  width: 400px;
  display: flex;
}

.switch_category_div {
  flex: 1;
  background: #FFFFFF;
  box-sizing: border-box;
  border-top: 1px solid #E5E6EB;
}

.switch_category_div:not(:last-child) {
  border-right: 1px solid #E5E6EB;
}

.switch_category_div .name {
  background-color: #F2F3F5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .category_list {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.switch_category_div .category_cell {
  cursor: pointer;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .active {
  background-color: #165DFF;
  color: #fff;
}

.talent_table {
  width: calc(100% - 400px);
}
</style>
